<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <meta name="MobileOptimized" content="320"/>
    <link href="../../resources/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

    <style>
        #btn-search {
            display: inline-block;
            background: #000;
            color: #FFF;
            font-size: 13px;
            line-height: 22px;
            text-transform: uppercase;
            border: none;
            outline: none;
            transition: 0.2s;
            -webkit-transition: 0.2s;
            -moz-transition: 0.2s;
            -o-transition: 0.2s;
        }
        .t_bt{
            display: inline-block;
            background: #000;
            color: #FFF;
            font-size: 13px;
            line-height: 22px;
            text-transform: uppercase;
            border: none;
            outline: none;
            transition: 0.2s;
            -webkit-transition: 0.2s;
            -moz-transition: 0.2s;
            -o-transition: 0.2s;
        }

    </style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<div class="row">
    <div class="col-md-12">
        <h3 class="page-title" style="padding-left:15px;margin-top:22px">
            会员
            <small>管理</small>
        </h3>
        <hr/>
    </div>

    <div style="padding-left:15px;padding-top:2px">


        <form action="memberSearch.html" name="form3" th:action="@{/member/memberSearch}">
            <table class="table table-striped">
                <tr>
                    <th>会员查询：</th>
                </tr>
                <tr bgcolor="#e7e9e9">
                    <td>会员手机号</td>
                    <td><input type="text" name="phone"/></td>
                    <td><input id="btn-search" type="submit" value="查询"/></td>
                </tr>
            </table>
        </form>

        <div class="panel panel-info">
            <div class="panel-heading">会员详情</div>
        <table id="memberDetail" class="table table-striped table-bordered table-hover">
            <thead>
                <th>姓名</th>
                <th>性别</th>
                <th>身份证号</th>
                <th>会员等级</th>
                <th>手机号</th>
                <th>注册时间</th>
                <th>经办人</th>
                <th th:if="${session.currentUser.id}==1">
                    操作
                </th>
            </thead>
            <tr bgcolor="#e7e9e9" th:each="member,memberStat:${members}">
                <td th:id="${'tdn'+memberStat.index}" th:text="${member.name}">姓名</td>
                <td th:text="${member.genderNote}">性别</td>
                <td th:id="${'tdi'+memberStat.index}" th:text="${member.IDCard}">身份证号</td>
                <td th:text="${member.levelNote}">会员等级</td>
                <td th:id="${'tdp'+memberStat.index}" th:text="${member.phone}">手机号</td>
                <td th:text="${member.registtime}">注册时间</td>
                <td th:text="${member.createBy}">经办人</td>
                <td th:if="${session.currentUser.id}==1">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span class='glyphicon glyphicon-edit operate' title='修改' th:onclick="${'modifyMember('+memberStat.index+','+member.id+')'}"></span>
                   </td>
            </tr>
        </table>
            </div>

        <!--分页导航-->
        <div id="bottomTool" class="row-fluid">

            <!--选择每页多少行-->
            <div class="span6" style="float:left;margin-left:200px">
                <div class="dataTables_length" id="DataTables_Table_0_length">
                    <label>每页
                        <select id="pageSize" onChange="research()" aria-controls="DataTables_Table_0" size="1"
                                name="DataTables_Table_0_length">
                            <option th:selected="5 == ${page.pageSize}" value="5">5</option>
                            <option th:selected="10 == ${page.pageSize}" value="10">10</option>
                            <option th:selected="25 == ${page.pageSize}" value="25">25</option>
                        </select>
                        条记录
                    </label>
                </div>
            </div>


            <!--分页-->
            <div class="span6" style="float:left;margin-left:120px;margin-top:-8px">
                <div class="dataTables_paginate paging_bootstrap pagination">
                    <ul id="previousNext">
                        <li class="prev disabled" style="float:left"  th:style="${page.currentPage==1?'pointer-events:none;float:left;':'pointer-events:auto;float:left;'}"><a id="previousPage" href="#" onclick="prePage()" th:style="${page.currentPage==1?'color:#aaa':'color:#00f'}">上一页</a>
                        </li>
                        <div id="page" style="float:left;width:60px">
                            <select id="pageNum" onChange="search()" aria-controls="DataTables_Table_0" size="1"
                                    name="DataTables_Table_0_length" style="margin-top:-2px">
                                <option th:each="i : ${#numbers.sequence( 1, page.totlePage, 1)}" th:value="${i}"
                                        th:text="${i}" th:selected="${i} == ${page.currentPage}" selected="selected"
                                        value="1">1
                                </option>
                            </select>
                        </div>
                        <li class="next" style="float:left" th:style="${page.currentPage==page.totlePage?'pointer-events:none;float:left;':'pointer-events:auto;float:left;'}"><a id="nextPage" href="#" onclick="nextPage()" th:style="${page.currentPage==page.totlePage?'color:#aaa':'color:#00f'}">下一页</a></li>
                    </ul>
                </div>
            </div>


            <div class="span6" style="float:left;margin-left:40px">
                <div id="DataTables_Table_0_info" class="dataTables_info" style="font-size:15px">共<span
                        th:text="${page.totlePage}">1</span>页/共<span th:text="${page.totleNumber}">1</span>项
                </div>
            </div>
        </div>

        <form id="hideForm" action="memberSearch.html" method="post" th:action="@{/link/memberSearch}" hidden="hidden">
            <input id="hideCurrentPage" name="currentPage" th:value="${page.currentPage}"/>
            <input id="hidePageSize" name="pageSize" th:value="${page.pageSize}"/>
            <input id="hideMaxPage" name="maxPage" th:value="${page.totlePage}"/>
        </form>
    </div>
</div>
<!-- 修改会员，弹出框-->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labeledby="modalTitle"
     style="margin-top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <center><h4 class="modal-title" style="font-family:'黑体'">修改会员信息</h4></center>
            </div>
            <center>
                <div class="modal-body">

                        <form method="post" th:action="@{/manage/memberModify}" action="javascript:void;" style="padding-top:10px">
                            <input type="hidden" id="memId" name="memberId"/>
                            <div>
						<span>会员姓名:
						</span> <input type="text" name="memberName" id="memberName"/>
                            </div>
                            <br/>

                            <div>
						<span>身份证号:
						</span> <input type="text" name="IDCardNo" id="memberID"/>
                            </div>
                            <br/>

                            <div>
						<span>手机号:&nbsp;&nbsp;&nbsp;&nbsp;
						</span> <input type="text" name="memberPhoneNumber" id="memberPhoneNumber"/>
                            </div>
                            <br/>
                            <hr/>
                            <input class='t_bt' id="okbt" type="submit" value="提交"/>
                            <input class='t_bt' id="cancelbt" type="button" value="取消" onclick="cancelModify()"/>

                        </form>

                </div>
            </center>
        </div>
    </div>
</div>
</body>
<script src="../../resources/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../../resources/plugins/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../../resources/plugins/dataTables.bootstrap.js" th:src="@{/resources/plugins/dataTables.bootstrap.js}"
        type="text/javascript"></script>
<script src="../../resources/plugins/jquery.dataTables.js" th:src="@{/resources/plugins/jquery.dataTables.js}"
        type="text/javascript"></script>
<script src="../../resources/plugins/bootstrap/js/bootstrap.js"
        th:src="@{/resources/plugins/bootstrap/js/bootstrap.js}" type="text/javascript"></script>
<script src="../../resources/plugins/bootstrap/js/bootstrap.min.js"
        th:src="@{/resources/plugins/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>

<script type="text/javascript">
    // <![CDATA[

    function search() {
        var currentPage = $("#pageNum option:selected").text();
        console.log(currentPage);
        var pageSize = $("#pageSize option:selected").text();
        console.log(pageSize);
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }

    function research(){
        var pageSize = $("#pageSize option:selected").text();
        console.log(pageSize);
        var currentPage = 1;
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }

    /**
     * 上一页
     */
    function prePage() {
        var currentPage = $("#hideCurrentPage").val();
        var pageSize = $("#hidePageSize").val();
        if (currentPage == 1) {
            //已经是第一页
            $("#previousPage").css("color", "#aaa");
            return;
        }
        currentPage--;
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }

    /**
     * 下一页
     */
    function nextPage() {
        var currentPage = $("#hideCurrentPage").val();
        var pageSize = $("#hidePageSize").val();
        var maxPage = $("#hideMaxPage").val();
        if (currentPage == maxPage) {
            //已经是最后一页
            return;
        }
        currentPage++;
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }
    function modifyMember(arg,id) {
        var v=arg;
        $('#secondModal').modal('show');
        $('#memId').val(''+id);
        $('#memberName').val($("#tdn"+v).text());
        $('#memberPhoneNumber').val($("#tdp"+v).text());
        $('#memberID').val($("#tdi"+v).text());
    }
    function cancelModify() {
        $('#secondModal').modal('hide');
    }
    // ]]>


</script>

</html>
